<template>
  <el-form-item label="对应关系配置" v-if="!!isSubFormChildWidget()">
    <el-input v-model="optionModel.correspondenceConfig" placeholder="请选择选人组件与子表单字段的对应关系" @click="showDialog"
      readonly />
    <el-dialog v-model="sortDialogShowFlag" title="对应关系配置" width="800" :before-close="handleClose">
      <el-button @click="addConfig" style="margin-bottom: 12px;">
        <el-icon>
          <Plus />
        </el-icon>
        新增
      </el-button>
      <el-form ref="form" :model="form" label-width="auto" style="max-width: 800px" :rules="rules">
        <el-row v-for="(item, index) in form.formData" :key="item.key" :gutter="12" class="configRow">
          <el-col :span="11">
            <el-form-item label="选人组件字段">
              <el-select v-model="item.selectPersonCode" placeholder="选人组件字段" clearable>
                <el-option v-for="personItem in selelctPersonCodes" :label="personItem.name" :value="personItem.value"
                  :disabled="isDisabled(personItem.value)" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="子表单字段">
              <el-select v-model="item.subFormItemCode" placeholder="子表单字段" clearable>
                <el-option v-for="subitem in subItemmCodes" :key="subitem.key"
                  :label="subitem.options.label + '(' + subitem.options.name + ')'" :value="subitem.id"
                  :disabled="isSubDisabled(subitem.id)" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-button @click="deleteConfig(index)"><el-icon>
                <Delete />
              </el-icon></el-button>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="sortDialogShowFlag = false">取消</el-button>
          <el-button type="primary" @click="changeConfig">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </el-form-item>
</template>

<script>
import i18n from "@/utils/i18n"

export default {
  name: "correspondenceConfig-editor",
  mixins: [i18n],
  data() {
    return {
      sortDialogShowFlag: false,
      selelctPersonCodes: [
        {
          name: '部门',
          value: 'deptName'
        },
        {
          name: '姓名',
          value: 'name'
        },
        {
          name: '组织',
          value: 'organize'
        },
        {
          name: '电话',
          value: 'phone'
        }
      ],
      subItemmCodes: [],
      parentWidgetList: [],
      form: {
        formData: [
          {
            selectPersonCode: '',
            subFormItemCode: ''
          }
        ]
      }
    }
  },
  props: {
    designer: Object,
    selectedWidget: Object,
    optionModel: Object,
  },
  inject: ['isSubFormChildWidget', 'parentWidget'],
  methods: {
    showDialog() {
      this.sortDialogShowFlag = true;
    },
    changeConfig() {

      this.optionModel.correspondenceConfig = JSON.stringify(this.form.formData);
      this.sortDialogShowFlag = false;
    },
    addConfig() {
      this.form.formData.push({
        selectPersonCode: '',
        subFormItemCode: ''
      });
    },
    deleteConfig(index) {
      this.form.formData.splice(index, 1)
    },
    isDisabled(code) {
      let flag = false;
      this.form.formData.forEach(item => {
        if (item.selectPersonCode === code) {
          flag = true
        }
      })
      return flag
    },
    isSubDisabled(code) {
      let flag = false;
      this.form.formData.forEach(item => {
        if (item.subFormItemCode === code) {
          flag = true
        }
      })
      return flag
    }
  },
  mounted() {
    this.parentWidgetList = this.parentWidget() ? this.parentWidget().widgetList : [];
    this.subItemmCodes = this.parentWidget() ? this.parentWidget().widgetList?.filter(item => item.key !== this.selectedWidget.key) : [];
    this.form.formData = JSON.parse(this.optionModel.correspondenceConfig || '[]');
  },
}
</script>

<style scoped lang="scss">
.configRow {
  :deep(.el-form-item__label) {
    font-size: 13px;
    //text-overflow: ellipsis;
    // overflow: hidden;
    white-space: wrap;
    line-height: normal !important;
  }

  :deep(.el-form-item--small.el-form-item) {
    margin-bottom: 10px;
  }
}
</style>
